<template>
	<view class="container" :style="{paddingTop: paddingTop +'px'}" v-if="cashback">
		<uni-nav-bar :height="navBarHeight" left-icon="left" backgroundColor="transpant" color="#2e2e2e" :border="false" title="支付成功" @clickLeft="back" />
		<view class="result-con">
			<view class="result-detail box">
				<view class="icon-box flex" >
					<image class="success" src="../../static/images/success.svg" mode=""></image>
				</view>
				<view class="result-txt" style="text-align: center;">支付成功</view>
				<view class="price-box">
					<goods-price :price="payment.amount" size="large" color="#000"></goods-price>
				</view>
				<view class="result-txt grey">商户名称：{{shop_name}}</view>
				<view class="result-txt grey">支付时间：<uni-dateformat :date="payment.created_at"></uni-dateformat></view>
				<view class="result-txt grey">订单编号：{{payment.payment_no}}</view>
			</view>
			<view class="result-back box">
				<view class="back-head flex-center">
					<view class="back-txt">
						最高免单：
					</view>
					<goods-price :price="cashback.back_amount"></goods-price>
				</view>
				<view class="order-list-package">
					<text v-if="cashback.package < 1" class="order-list-package-left">当前免单未加速</text>
					<view v-else class="order-list-package-left">
						<image v-for="idx in getShowPackageNumber(cashback.package)" :key="idx" src="../../static/images/package.svg"></image>
						<text>已加速{{cashback.package}}次</text>
					</view>
					<text v-if="cashback.status !== 3" class="order-list-package-right" @click="spCashback(cashback.id)">{{cashback.package > 0 ? '继续加速' : '立即加速'}}</text>
				</view>
				<view class="order-list-bar">
					<view class="bar bg"></view>
					<view class="bar active" :style="{width: ((cashback.backed_amount / cashback.back_amount) * 100)+ '%'}">
						<view class="backed" :style="{right: (cashback.backed_amount / cashback.back_amount) * 100 > 10 ? '-20rpx' : '-50rpx'}">
							<image class="icon" src="../../static/images/triangle.png" mode=""></image>
							<view class="count">
								¥{{(cashback.backed_amount / 100).toFixed(2)}}
							</view>
						</view>
					</view>
					<view class="bar ratio" :style="{width: cashback.ratio + '%'}"></view>
				</view>
				<view class="order-list-invite">
					<view v-if="cashback.invite_user_id" class="invited flex-center">
						<image class="avatar" :src="cashback.avatar ?  cashback.avatar : defaultAvatar" mode=""></image>
						<view class="invite-txt">
							您的好友{{name}}已助力解锁全部免单金额
						</view>
					</view>
					<view class="invite flex" v-else-if="cashback.ratio < 100 && (cashback.status === 1 || cashback.status === 2)">
						<view class="invite-txt">
							邀好友助力可解锁<text class="active">¥{{(cashback.back_amount * (100 - cashback.ratio) / 10000).toFixed(2)}}</text>免单额度
						</view>
						<button class="invite-btn" open-type="share">
							邀请好友
						</button>
					</view>
					<view class="invite flex" v-else-if="cashback.status === 1 || cashback.status === 2">
						<view class="invite-txt">邀请好友助力加速免单</view>
						<button class="invite-btn" open-type="share">
							邀请好友
						</button>
					</view>
				</view>
			</view>
			<view class="shop-btn" @click="toIndex">
				回到首页
			</view>
		</view>
	</view>
</template>

<script>
	import { shopPaymentDetail, speedCashback, getUserDetail } from '@/http/apis.js';
	import { mapGetters, mapMutations } from "vuex";
	import defaultAvatar from '../../static/images/avatar.svg';
	export default {
		name: 'result',
		data() {
			return {
				paddingTop: getApp().globalData.statusBarHeight,
				navBarHeight: getApp().globalData.navBarHeight,
				shop_name: '',
				loading: false,
				cashback: null,
				payment: null,
				avatar: '',
				name: '',
				defaultAvatar
			}
		},
		onLoad(e) {
			this.payment_id = parseInt(e.id)
			this.shop_name = e.name;
			this.getData()
		},
		computed: {
			...mapGetters(['user']),
		},
		methods: {
			...mapMutations(['setUser']),
			getData() {
				this.loading = true;
				uni.showLoading()
				shopPaymentDetail({id: this.payment_id}).then(res => {
					this.cashback = res.cashback.cashback;
					this.payment = res.payment;
					this.avatar = res.cashback.avatar;
					this.name = res.cashback.name;
					this.loading = false;
					uni.hideLoading();
				}).catch(res => {
					this.loading = false;
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},
			// 加速免单
			spCashback(id) {
				if (this.user.user.cashback_package < 1) {
					uni.showModal({
						title:"加速包不足",
						content:"你还没有加速包，每邀请1个好友就可获得1个加速包，每邀请5个好友额外获得2个加速包，立即邀请好友吧"
					})
				} else {
					if (this.loading) return;
					this.loading = true
					speedCashback({id}).then((data) => {
						this.loading = false;
						uni.showToast({
							title:"加速成功",
							icon: 'success'
						})
						this.getData();
						this.updateUser();
					}).catch((res)=>{
						this.loading = false;
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					})
				}
			},
			updateUser() {
				getUserDetail().then(res => {
					this.setUser(res)
				})
			},
			getShowPackageNumber(number) {
				return number > 5 ? 5 : number
			},
			back() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			toIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.box {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-sizing: border-box;
	}
	.arrow {
		width: 12rpx;
		height: 24rpx;
	}
	.container {
		width: 100%;
		height: 100vh;
		padding: 176rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
		position: relative;
		background: linear-gradient(242deg, #F7D35D 23%, #FFCB2C 84%);
		.result-con {
			width: 100%;
			background: #FFEFD6;
			height: calc(100vh - 450rpx);
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			left: 0;
			.result-detail {
				width: 702rpx;
				padding: 40rpx 60rpx 48rpx 60rpx;
				box-sizing: border-box;
				margin-top: -240rpx;
				.icon-box {
					width: 100%;
					justify-content: center;
					margin-bottom: 28rpx;
					.success {
						width: 72rpx;
						height: 72rpx;
					}
				}
				.result-txt {
					font-size: 28rpx;
					color: #2e2e2e;
					line-height: 44rpx;
					&.grey {
						color: #969799;
					}
				}
				.price-box {
					display: flex;
					justify-content: center;
					height: 60rpx;
					line-height: 60rpx;
					margin: 6rpx auto 60rpx auto;
				}
			}
			.result-back {
				width: 100%;
				padding: 40rpx 30rpx 40rpx 30rpx;
				box-sizing: border-box;
				margin-top: 36rpx;
				.back-txt {
					color: #FE8A01;
					font-size: 24rpx;
				}
				.back-head {
					height: 56rpx;
					line-height: 56rpx;
					width: 100%;
					border-bottom: 2rpx solid #F1F1F1;
				}
				.order-list-package{
					display: flex;
					margin-top: 30rpx;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					&-left{
						display: flex;
						align-items: center;
						flex: 1;
						overflow: hidden;
						margin-right: 20rpx;
						color: #2e2e2e;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
					&-right{
						color: #F9642D;
					}
				}
				.order-list-bar {
					width: 100%;
					position: relative;
					margin-top: 30rpx;
					.bar {
						height: 22rpx;
						border-radius: 11rpx;
					}
					.bg {
						background-color: #EAEAEA;
						width: 100%;
					}
					.active {
						background-color: #F97028;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 3;
					}
					.ratio {
						background: rgba(255, 169, 59, 0.3412);
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
					}
					.backed {
						position: absolute;
						bottom: -60rpx;
						height: 54rpx;
						width: auto;
						right: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.icon {
							width: 14rpx;
							height: 10rpx;
							margin: 0 auto;
						}
						.count {
							color: #FE8A01;
							font-size: 24rpx;
							line-height: 44rpx;
							margin-top: -6rpx;
						}
					}
				}
				.order-list-invite {
					margin-top: 60rpx;
					width: 100%;
					.invite-txt {
						color: #2E2E2E;
						font-size: 24rpx;
						line-height: 44rpx;
						.active {
							color: #FE8A01;
						}
					}
					.invited {
						.avatar {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}
					}
					.invite {
						.invite-btn {
							width: 200rpx;
							height: 60rpx;
							font-size: 24rpx;
							font-weight: normal;
							line-height: 60rpx;
							text-align: center;
							color: #FFFFFF;
							background: linear-gradient(278deg, #F9642D 0%, #FEA213 97%, #FF8A00 98%);
							border-radius: 30rpx;
							margin: 0;
						}
					}
				}
			}
			.shop-btn {
				width: 702rpx;
				color: #30240A;
				font-size: 28rpx;
				text-align: center;
				border-radius: 50rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: linear-gradient(101deg, #FADF5D 19%, #F7D35D 80%);
				position: absolute;
				bottom: 100rpx;
				left: 24rpx;
				z-index: 2;
			}
		}
	}
</style>